import React, { useMemo } from "react";
import { Avatar, Button, Popover, Statistic } from "antd";
import { ArrowUpOutlined, DoubleLeftOutlined } from '@ant-design/icons';
import style from './style.module.scss'
import AccountChart from "../echarts/AccountChart";
import TypeChart from "../echarts/StoreTypeChart";
import TagsChart from "../echarts/StoreTagsCharts";
import { useCompareStore } from '@/stores/compareStore'
import { useHoverStore } from '@/stores/hoverStore'
import { useEffect, useState } from "react";
import http from "@/api/axios";
import type { Brand, FinancialData } from "@/Interface/BrandInterface";


const Right = React.memo(() => {
  const compare = useCompareStore((state) => state.compare);
  const ishovered = useHoverStore((state) => state.ishovered);
  const setHover = useHoverStore((state) => state.setHover);

  const [financialData, setFinancialData] = useState<FinancialData | null>(null)
  const [brandData, setBrandData] = useState<Brand | null>(null)
  const [total, setTotal] = useState<number>(0)

  const {
    financials: {
      '2025': {
        market_cap = 0,
        market_growth = 0
      } = {}
    } = {}
  } = financialData || {}

  useEffect(() => {
    const getData = async () => {
      try {
        const [statsRes, financialsRes, brandRes] = await Promise.all([
          http.get('/api/stores/stats'),
          http.get('/api/financials'),
          http.get('/api/brand')
        ]);
        setTotal(statsRes.data.data.total);
        setFinancialData(financialsRes.data.data);
        setBrandData(brandRes.data.data);
      } catch (error) {
        console.error('初始化数据失败:', error);
      }
    }
    getData()
  }, [])

  const carouselContent = useMemo(() => (
    <>
      <AccountChart />
      <div className={style.pieCharts}>
        <TypeChart />
        <TagsChart />
      </div>
    </>
  ), [])


  return (
    <div className={`${style.size} ${(compare || ishovered) && style.hide} `}>
      <div className={style.inner}>
        <div className={style.brandInfo}>
          <h2>
            <Avatar src='/logo.webp' alt="logo" />
            <span>{brandData?.name}</span>
          </h2>
          <div className={style.content}>
            <p>定位：{brandData?.industry}</p>
            <p>slogan：{brandData?.slogan}</p>
            <Popover
              placement="bottomRight"
              title={"关于" + brandData?.name}
              content={brandData?.story}
            >
              <Button>品牌故事</Button>
            </Popover>
          </div>
        </div>
        <div className={style.statistic}>
          <div className={style.storeNumber}>
            <p>门店总数</p>
            <p>{total}</p>
          </div>
          <Statistic title="当前市值" value={market_cap + '亿元'} />
          <Statistic
            title="市值增长率"
            value={market_growth}
            precision={2}
            className={`${market_growth && style.green}`}
            prefix={market_growth && <ArrowUpOutlined />}
            suffix="%"
          />
        </div>
        {carouselContent}
      </div>
      <DoubleLeftOutlined
        className={style.leftout}
        onClick={() => setHover(true)}
      />
    </div>
  )
})

export default Right;
